<template>
  <view class="chart-ring">
    <charttips name="门店库存统计" tooltip="不计算已处置、已归还的车辆" />
    <ve-subsection v-if="status" class="tabs" :list="tabs" mode="subsection" :current="current" activeColor="#165DFF" @change="onChange" />
    <view class="pie-box">
      <qiun-data-charts
        type="ring"
        :canvas2d="true"
        :reshow="status"
        :canvasId="canvasId"
        :opts="defaultOption"
        :chartData="chartData"
        tooltipFormat="storepietooltip"
      />
    </view>
  </view>
</template>

<script>
  import charttips from '../components/charttips.vue'
  export default {
    props: {
      canvasId: {
        type: String,
        default() {
          return 'storePie' + new Date().getTime()
        },
      },
      amount: {
        type: Array,
        default() {
          return []
        },
      },
      options: {
        type: Object,
        default() {
          return {}
        },
      },
      status: {
        type: Boolean,
      },
    },
    components: {
      charttips,
    },
    data() {
      return {
        chartData: {},
        current: 0,
        tabs: [
          {
            name: '车系维度统计',
          },
          {
            name: '车型维度统计',
          },
        ],
        defaultOption: {
          title: {
            name: '',
            color: '#1D2129',
            fontSize: 14,
          },
          tooltip: {
            show: false, // 关闭默认 tooltip
          },
          padding: [20, 10, 20, 10],
          // 屏幕旋转相关
          rotate: false,
          rotateLock: false,
          update: true,
          scrollPosition: 'left',
          // 色系
          // color: ,
          // 是否显示图表区域内数据点上方的数据文案
          dataLabel: false,
          // padding: [0, 0, 0, 0],
          // 图例配置
          legend: { show: false },
          // 主标题配置
          // title: { name: '' },
          // 副标题配置
          subtitle: { name: '' },
          extra: {
            ring: {
              // 圆环的宽度
              ringWidth: 22,
              // 起始角度偏移度
              offsetAngle: 0,
              // 各类别中间的分割线配置
              border: true,
              borderWidth: 1,
              borderColor: '#FFFFFF',
              activeOpacity: 0,
              activeRadius: 0,
            },
            tooltip: {
              showBox: true,
              showArrow: true,
              legendShow: false,
              bgColor: '#000',
              fontColor: '#fff',
            },
          },
        },
      }
    },
    methods: {
      onChange(index) {
        this.current = index

        this.chartData = {}
        const res = {
          series: [
            {
              data: [],
            },
          ],
        }
        let count = 0

        if (index === 0) {
          if (this.amount && this.amount[0]?.carSeriesInfoDto) {
            this.amount[0].carSeriesInfoDto.forEach((item) => {
              item.tmpName = item.seriesName
              count += item.count

              res.series[0].data.push({
                name: item.tmpName,
                value: item.count * 10, // 给一个最小值以确保有块
              })
            })

            if (this.amount[0].count == 0) {
              this.defaultOption.title.name = '暂无数据'
              this.defaultOption.subtitle.name = ''
            } else {
              this.defaultOption.title.name = this.amount[0].outboundCount + '/' + this.amount[0].count + '辆'
              this.defaultOption.subtitle.name = `出库率: ${Math.round((this.amount[0].outboundCount / this.amount[0].count) * 100)}%`
              this.defaultOption.subtitle.fontSize = '13'
              this.defaultOption.subtitle.color = '#000'
            }
          } else {
            this.defaultOption.title.name = '暂无数据'
            this.defaultOption.subtitle.name = ''
          }
        } else {
          if (this.amount && this.amount[0]?.carModelInfoDto) {
            this.amount[0].carModelInfoDto.forEach((item) => {
              count += item.count

              item.tmpName = item.modelName
              res.series[0].data.push({
                name: item.tmpName,
                value: item.count * 10, // 给一个最小值以确保有块
              })
            })

            if (this.amount[0].count == 0) {
              this.defaultOption.title.name = '暂无数据'
              this.defaultOption.subtitle.name = ''
            } else {
              this.defaultOption.title.name = this.amount[0].outboundCount + '/' + this.amount[0].count + '辆'
              this.defaultOption.subtitle.name = `出库率: ${Math.round((this.amount[0].outboundCount / this.amount[0].count) * 100)}%`
              this.defaultOption.subtitle.fontSize = '13'
              this.defaultOption.subtitle.color = '#000'
            }
          } else {
            this.defaultOption.title.name = '暂无数据'
            this.defaultOption.subtitle.name = ''
          }
        }

        this.chartData = JSON.parse(JSON.stringify(res))
      },
    },
    watch: {
      amount: {
        handler(newVal) {
          const res = {
            series: [
              {
                data: [],
              },
            ],
          }
          this.chartData = {}
          this.current = 0

          if (newVal && newVal[0]?.carSeriesInfoDto) {
            newVal[0].carSeriesInfoDto.forEach((item) => {
              item.tmpName = item.seriesName

              res.series[0].data.push({
                name: item.tmpName,
                value: item.count * 10, // 给一个最小值以确保有块
              })
            })

            if (newVal[0].count == 0) {
              this.defaultOption.title.name = '暂无数据'
              this.defaultOption.subtitle.name = ''
            } else {
              this.defaultOption.title.name = newVal[0].outboundCount + '/' + newVal[0].count + '辆'
              this.defaultOption.subtitle.name = `出库率: ${Math.round((newVal[0].outboundCount / newVal[0].count) * 100)}%`
              this.defaultOption.subtitle.fontSize = '13'
              this.defaultOption.subtitle.color = '#000'
            }
          } else {
            this.defaultOption.title.name = '暂无数据'
            this.defaultOption.subtitle.name = ''
          }

          this.chartData = JSON.parse(JSON.stringify(res))
        },
        immediate: true,
      },
    },
  }
</script>

<style lang="less" scoped>
  .pie-box {
    height: 286px;
  }
  .chart-ring {
    width: 100%;
    height: 100%;
  }
  .tabs {
    margin-top: 10px;
  }
</style>
